<!DOCTYPE html>
<html lang="zh-CN">


<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <meta name="author" content="viggo" />
  <title>MrLiu的博客 - </title>
  <meta name="keywords" content="">
  <meta name="description" content="">
  <link rel="shortcut icon" href="/static/favicon.ico">
  <link rel="stylesheet" href="/css/github.min.css">
  <script src="/js/highlight.min.js"></script>
  
<link rel="stylesheet" href="//fonts.loli.net/css?family=Arimo:400,700,400italic.css">
<link rel="stylesheet" href="/css/fonts/linecons/css/linecons.min.css">
<link rel="stylesheet" href="/css/fonts/fontawesome/css/all.min.css">
<link rel="stylesheet" href="/css/bootstrap.min.css">
<link rel="stylesheet" href="/css/xenon-core.min.css">
<link rel="stylesheet" href="/css/xenon-components.min.css">
<link rel="stylesheet" href="/css/xenon-skins.min.css">
<link rel="stylesheet" href="/css/index.css">
<link rel="stylesheet" href="/css/nav.min.css">
<link rel="stylesheet" href="/css/md.css">

  
<script src="/js/jquery-1.11.1.min.js"></script>

  
<script src="/js/header.js"></script>

  <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
  <!--[if lt IE 9]>
        
<script src="/js/html5shiv.min.js"></script>

        
<script src="/js/respond.min.js"></script>

    <![endif]-->
  <script>
  hljs.configure({useBR: true});
  hljs.initHighlightingOnLoad();
  </script>
  <!-- / FB Open Graph -->
  <meta property="og:type" content="article">
  <meta property="og:url" content="https://liu-meizhou.github.io/js%E5%8E%9F%E5%9E%8B%E9%93%BE/index.html">
  <meta property="og:title" content="MrLiu的博客 - ">
  <meta property="og:description" content="">
  <meta property="og:site_name" content="MrLiu的博客 - ">
  
  <meta property="og:image" content="/images/webstack_banner_cn.png">
  
  <!-- / Twitter Cards -->
  <meta name="twitter:card" content="summary_large_image">
  <meta name="twitter:title" content="MrLiu的博客 - ">
  <meta name="twitter:description" content="">
  
  <meta name="twitter:image" content="/images/webstack_banner_cn.png">
  
<meta name="generator" content="Hexo 5.4.0"></head>

<body>
  <div class="page-container">
    <div class="sidebar-menu toggle-others fixed">
  <div class="sidebar-menu-inner">
    <header class="logo-env">
      <div class="logo">
        <a href="/index.html" class="logo-expanded">
          <img src="/images/logo@2x.png" width="100%" alt="" />
        </a>
        <a href="/index.html" class="logo-collapsed">
          <img src="/images/logo-collapsed@2x.png" width="40" alt="" />
        </a>
      </div>
      <div class="mobile-menu-toggle visible-xs">
        <a href="#" data-toggle="user-info-menu">
          <i class="linecons-cog"></i>
        </a>
        <a href="#" data-toggle="mobile-menu">
          <i class="fas fa-bars"></i>
        </a>
      </div>
    </header>
    <ul id="main-menu" class="main-menu">
      

      
        <li><a href="#元素居中" class="fas fa-angle-down" style="cursor: pointer; padding-left: 0em" title="元素居中"><i class="far fa-star"></i><span class="title">元素居中</span></a><ul><li><a href="#行内元素" class="smooth" style="padding-left: 1em" title="行内元素"><i class="far fa-star"></i><span class="title">行内元素</span></a></li><li><a href="#块元素" class="smooth" style="padding-left: 1em" title="块元素"><i class="far fa-star"></i><span class="title">块元素</span></a></li><li><a href="#弹性盒子" class="smooth" style="padding-left: 1em" title="弹性盒子"><i class="far fa-star"></i><span class="title">弹性盒子</span></a></li></ul></li><li><a href="#css实现三角形" class="fas fa-angle-down" style="cursor: pointer; padding-left: 0em" title="css实现三角形"><i class="far fa-star"></i><span class="title">css实现三角形</span></a><ul><li><a href="#应用在下拉选择框" class="smooth" style="padding-left: 1em" title="应用在下拉选择框"><i class="far fa-star"></i><span class="title">应用在下拉选择框</span></a></li></ul></li><li><a href="#css实现步骤线" class="smooth" style="padding-left: 0em" title="css实现步骤线"><i class="far fa-star"></i><span class="title">css实现步骤线</span></a></li><li><a href="#线性变换线" class="smooth" style="padding-left: 0em" title="线性变换线"><i class="far fa-star"></i><span class="title">线性变换线</span></a></li><li><a href="#自适应高度的底部footer" class="fas fa-angle-down" style="cursor: pointer; padding-left: 0em" title="自适应高度的底部footer"><i class="far fa-star"></i><span class="title">自适应高度的底部footer</span></a><ul><li><a href="#页面高度不足" class="smooth" style="padding-left: 1em" title="页面高度不足"><i class="far fa-star"></i><span class="title">页面高度不足</span></a></li><li><a href="#页面高度足够" class="smooth" style="padding-left: 1em" title="页面高度足够"><i class="far fa-star"></i><span class="title">页面高度足够</span></a></li></ul></li>
      

      
      <li class="submit-tag">
        <a href="/author">
          <i class="far fa-heart"></i>
          <span class="tooltip-blue">关于作者</span>
        </a>
      </li>
      
      
      <li>
        <a href="javascript:void(0)">
          <i class="fas fa-eye"></i>
          <span id="busuanzi_container_site_pv">本站总访问量<span id="busuanzi_value_site_pv"></span></span>
        </a>
      </li>
      <li>
        <a href="javascript:void(0)">
          <i class="fas fa-users"></i>
          <span id="busuanzi_container_site_uv">本站总访客数<span id="busuanzi_value_site_uv"></span></span>
        </a>
      </li>
      
    </ul>
  </div>
  <div class="e-resize"></div>
</div>

    <div class="main-content">
      <nav class="navbar user-info-navbar" role="navigation">
        <ul class="user-info-menu left-links list-inline list-unstyled">
          <li class="hidden-sm hidden-xs hover-line">
            <a href="#" data-toggle="sidebar">
              <i class="fas fa-bars"></i>
            </a>
          </li>
          <li class="dropdown hover-line language-switcher">
            <a href="/index.html" class="dropdown-toggle" data-toggle="dropdown">
              <img src="/images/flags/flag-cn.png" alt="flag-cn" /> Chinese
            </a>
            <ul class="dropdown-menu languages">
              <li class="active">
                <a href="/index.html">
                  <img src="/images/flags/flag-cn.png" alt="flag-cn" alt="flag-cn" /> Chinese
                </a>
              </li>
            </ul>
          </li>
          <li class="switch-mode hover-line" onclick="switchNightMode()">
            <a href="#">
              <svg t="1593061068148" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1681" width="16" height="16">
                <path d="M582.4 326.4c-140.8 0-256 115.2-256 256s115.2 256 256 256 256-115.2 256-256-115.2-256-256-256z m0 448c-70.4 0-131.2-36.8-164.8-92.8 12.8 3.2 27.2 4.8 40 4.8 121.6 0 219.2-99.2 219.2-219.2 0-17.6-1.6-35.2-6.4-52.8 60.8 32 102.4 96 102.4 169.6 1.6 104-84.8 190.4-190.4 190.4zM582.4 262.4c17.6 0 32-14.4 32-32v-128c0-17.6-14.4-32-32-32s-32 14.4-32 32v128c0 17.6 14.4 32 32 32zM262.4 582.4c0-17.6-14.4-32-32-32h-128c-17.6 0-32 14.4-32 32s14.4 32 32 32h128c17.6 0 32-14.4 32-32zM310.4 356.8c6.4 6.4 14.4 9.6 22.4 9.6 8 0 16-3.2 22.4-9.6 12.8-12.8 12.8-32 0-44.8l-91.2-91.2c-12.8-12.8-32-12.8-44.8 0-12.8 12.8-12.8 32 0 44.8l91.2 91.2zM944 220.8c-12.8-12.8-32-12.8-44.8 0l-91.2 91.2c-12.8 12.8-12.8 32 0 44.8 6.4 6.4 14.4 9.6 22.4 9.6 8 0 16-3.2 22.4-9.6l91.2-91.2c12.8-12.8 12.8-33.6 0-44.8zM310.4 808l-91.2 91.2c-12.8 12.8-12.8 32 0 44.8 6.4 6.4 14.4 9.6 22.4 9.6 8 0 16-3.2 22.4-9.6l91.2-91.2c12.8-12.8 12.8-32 0-44.8-11.2-11.2-32-11.2-44.8 0z" p-id="1682" fill="#707070"></path>
              </svg>
            </a>
          </li>
        </ul>
        
        <a target="_blank" rel="noopener" href="https://github.com/liu-meizhou/liu-meizhou.github.io" class="github-corner" aria-label="View source on GitHub"><svg width="80" height="80" viewBox="0 0 250 250" style="fill:#151513; color:#fff; position: absolute; top: 0; border: 0; right: 0;" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a><style>.github-corner:hover .octo-arm{animation:octocat-wave 560ms ease-in-out}@keyframes octocat-wave{0%,100%{transform:rotate(0)}20%,60%{transform:rotate(-25deg)}40%,80%{transform:rotate(10deg)}}@media (max-width:500px){.github-corner:hover .octo-arm{animation:none}.github-corner .octo-arm{animation:octocat-wave 560ms ease-in-out}}</style>
        
      </nav>
      
<h1 id="元素居中"><a href="#元素居中" class="headerlink" title="元素居中"></a>元素居中</h1><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><code class="hljs html"><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;parent&quot;</span> <span class="hljs-attr">style</span>=<span class="hljs-string">&quot;width: 100px; height:100px; background-color: aqua;&quot;</span>&gt;</span><br>	<span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;center&quot;</span> <span class="hljs-attr">style</span>=<span class="hljs-string">&quot;width: 80px; height:80px; background-color: burlywood;&quot;</span>&gt;</span><br>        <span class="hljs-tag">&lt;<span class="hljs-name">span</span>&gt;</span>center<span class="hljs-tag">&lt;/<span class="hljs-name">span</span>&gt;</span><br>    <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>    <br><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br></code></pre></td></tr></table></figure>

<h2 id="行内元素"><a href="#行内元素" class="headerlink" title="行内元素"></a>行内元素</h2><figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><code class="hljs css"><span class="hljs-comment">/* 水平居中 */</span><br><span class="hljs-selector-class">.center</span> &#123;<br>    <span class="hljs-attribute">text-align</span>: center;<br>&#125;<br><span class="hljs-comment">/* 用line-height */</span><br><br><span class="hljs-comment">/* 垂直居中 */</span><br><br><span class="hljs-comment">/* 转换成块元素、弹性盒子进行垂直居中 */</span><br></code></pre></td></tr></table></figure>

<div class="parent" style="float: left; width: 100px; height:100px; background-color: aqua;">
    <div class="center" style="text-align: center; width: 80px; height:80px; background-color: burlywood;">
        <span style="">center</span>
    </div>    
</div>
<div style="clear: both;"></div>

<h2 id="块元素"><a href="#块元素" class="headerlink" title="块元素"></a>块元素</h2><figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br></pre></td><td class="code"><pre><code class="hljs css"><span class="hljs-comment">/* margin水平居中1 */</span><br><span class="hljs-selector-class">.center</span> &#123;<br>    <span class="hljs-attribute">margin</span>: <span class="hljs-number">0</span> auto;<br>&#125;<br><br><span class="hljs-comment">/* margin水平居中2 */</span><br><span class="hljs-selector-class">.center</span> &#123;<br>    <span class="hljs-attribute">margin-left</span>: <span class="hljs-number">50%</span>;<br>    <span class="hljs-attribute">transform</span>: <span class="hljs-built_in">translateX</span>(-<span class="hljs-number">50%</span>);<br>&#125;<br><br><span class="hljs-comment">/* margin垂直居中1 */</span><br><span class="hljs-selector-class">.center</span> &#123;<br>    <span class="hljs-attribute">margin-top</span>: <span class="hljs-number">50%</span>;<br>    <span class="hljs-attribute">transform</span>: <span class="hljs-built_in">translateY</span>(-<span class="hljs-number">50%</span>);<br>&#125;<br><br><span class="hljs-comment">/* position设置absolute left水平top垂直+transform进行居中 */</span><br><span class="hljs-selector-class">.parent</span> &#123;<br>    <span class="hljs-attribute">position</span>: relative; <span class="hljs-comment">/* absolute、fixed、...（除static外）*/</span><br>&#125;<br><span class="hljs-selector-class">.center</span> &#123;<br>    <span class="hljs-attribute">position</span>: absolute; <br>    <span class="hljs-attribute">top</span>: <span class="hljs-number">50%</span>;<br>    <span class="hljs-attribute">left</span>: <span class="hljs-number">50%</span><br>    transform: <span class="hljs-built_in">translate</span>(-<span class="hljs-number">50%</span>, -<span class="hljs-number">50%</span>);<br>&#125;<br></code></pre></td></tr></table></figure>

<div class="parent" style="float: left; width: 100px; height:100px; background-color: aqua;">
    <div class="center" style="margin: 0 auto; width: 80px; height:80px; background-color: burlywood;">
        <span style="">margin水平居中1</span>
    </div>    
</div>
<div class="parent" style="float: left; margin-left: 30px; width: 100px; height:100px; background-color: aqua;">
    <div class="center" style="margin-left: 50%; transform: translateX(-50%); width: 80px; height:80px; background-color: burlywood;">
        <span style="">margin水平居中2</span>
    </div>    
</div>
<div class="parent" style="float: left; margin-left: 30px; width: 100px; height:100px; background-color: aqua;">
    <div class="center" style="margin-top: 50%; transform: translateY(-50%); width: 80px; height:80px; background-color: burlywood;">
        <span style="">margin垂直居中1</span>
    </div>    
</div>
<div class="parent" style="float: left; position: relative; margin-left: 30px; width: 100px; height:100px; background-color: aqua;">
    <div class="center" style="position: absolute; left:50%; top: 50%; transform: translate(-50%, -50%); width: 80px; height:80px; background-color: burlywood;">
        <span style="">left+top+transform进行居中</span>
    </div>    
</div>
<div style="clear: both;"></div>

<h2 id="弹性盒子"><a href="#弹性盒子" class="headerlink" title="弹性盒子"></a>弹性盒子</h2><figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><code class="hljs css"><span class="hljs-comment">/* flex水平垂直居中 */</span><br><span class="hljs-selector-class">.center</span> &#123;<br>    <span class="hljs-attribute">display</span>: flex;<br>    <span class="hljs-attribute">flex-direction</span>: row; <span class="hljs-comment">/* 当方向为column时,主轴与垂直轴相反 */</span><br>    <span class="hljs-attribute">align-items</span>: center; <span class="hljs-comment">/* 垂直轴: 垂直居中 */</span><br>    <span class="hljs-attribute">justify-content</span>: center; <span class="hljs-comment">/* 主轴: 水平居中 space-around也可以*/</span><br>&#125;<br></code></pre></td></tr></table></figure>

<div class="parent" style="float: left; width: 100px; height:100px; background-color: aqua;">
    <div class="center" style="display: flex; flex-direction: column; align-items: center; justify-content: center; width: 80px; height:80px; background-color: burlywood;">
        <span style="">center</span>
    </div>    
</div>
<div style="clear: both;"></div>

<h1 id="css实现三角形"><a href="#css实现三角形" class="headerlink" title="css实现三角形"></a>css实现三角形</h1><figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><code class="hljs css"><span class="hljs-selector-class">.tri</span> &#123;<br>    <span class="hljs-attribute">width</span>: <span class="hljs-number">0</span>;<br>    <span class="hljs-attribute">height</span>: <span class="hljs-number">0</span>;<br>    <span class="hljs-attribute">border</span>: <span class="hljs-number">15px</span> solid transparent;<br>    <span class="hljs-attribute">border-bottom-color</span>: <span class="hljs-number">#000</span>;<br>&#125;<br></code></pre></td></tr></table></figure>

<div style="width: 0; height: 0; border: 15px solid transparent; border-bottom-color: #000;"></div>

<h2 id="应用在下拉选择框"><a href="#应用在下拉选择框" class="headerlink" title="应用在下拉选择框"></a>应用在下拉选择框</h2><figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br></pre></td><td class="code"><pre><code class="hljs css"><span class="hljs-selector-class">.select-box</span> &#123;<br>    <span class="hljs-attribute">position</span>: relative;<br>&#125;<br><br><span class="hljs-selector-class">.select-box</span><span class="hljs-selector-pseudo">::before</span>, <span class="hljs-selector-class">.select-box</span><span class="hljs-selector-pseudo">::after</span> &#123;<br>    <span class="hljs-attribute">width</span>: <span class="hljs-number">0</span>;<br>    <span class="hljs-attribute">height</span>: <span class="hljs-number">0</span>;<br>    <span class="hljs-attribute">border</span>: <span class="hljs-number">5px</span> solid transparent;<br>    <span class="hljs-attribute">position</span>: absolute;<br>    <span class="hljs-attribute">right</span>: <span class="hljs-number">6px</span>;<br>    <span class="hljs-attribute">content</span>: <span class="hljs-string">&quot;&quot;</span>;<br>&#125;<br><br><span class="hljs-selector-class">.select-box</span><span class="hljs-selector-pseudo">::before</span>&#123;<br>    <span class="hljs-attribute">border-top-color</span>: <span class="hljs-number">#000</span>;<br>    <span class="hljs-attribute">bottom</span>: <span class="hljs-number">3px</span>;<br>&#125;<br><br><span class="hljs-selector-class">.select-box</span><span class="hljs-selector-pseudo">::after</span> &#123;<br>    <span class="hljs-attribute">border-bottom-color</span>: <span class="hljs-number">#000</span>;<br>    <span class="hljs-attribute">top</span>: <span class="hljs-number">3px</span>;<br>&#125;<br></code></pre></td></tr></table></figure>

<div style="width: 240px; height: 30px; background: #eceef0; position: relative;">
    <div style="width: 0; height: 0; border: 5px solid transparent; border-bottom-color: #000; position: absolute; right: 6px; top: 3px">
    </div>
    <div style="width: 0; height: 0; border: 5px solid transparent; border-top-color: #000; position: absolute; right: 6px; bottom: 3px">
    </div>
</div>

<h1 id="css实现步骤线"><a href="#css实现步骤线" class="headerlink" title="css实现步骤线"></a>css实现步骤线</h1><h1 id="线性变换线"><a href="#线性变换线" class="headerlink" title="线性变换线"></a>线性变换线</h1><p>实现一条颜色过渡好看的基线</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><code class="hljs html"><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;line&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br></code></pre></td></tr></table></figure>

<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br></pre></td><td class="code"><pre><code class="hljs css"><span class="hljs-comment">/* background 是linear-gradient要附加浏览器支持 */</span><br><span class="hljs-comment">/* 加入 -webkit-linear-gradient支持 Safari、Chrome、Webkit引擎, 注:移动端基本都是webkit引擎*/</span><br><span class="hljs-comment">/* 加入 -moz-linear-gradient支持 Firefox、GEcko引擎*/</span><br><span class="hljs-comment">/* 加入 -ms-linear-gradient支持 IE、Trident引擎*/</span><br><span class="hljs-selector-class">.line</span> &#123;<br>    <span class="hljs-attribute">height</span>: <span class="hljs-number">40px</span>;<br>    <span class="hljs-attribute">background</span>: <span class="hljs-built_in">linear-gradient</span>(to bottom, <span class="hljs-built_in">rgba</span>(<span class="hljs-number">0</span>,<span class="hljs-number">0</span>,<span class="hljs-number">0</span>,.<span class="hljs-number">14</span>), <span class="hljs-built_in">rgba</span>(<span class="hljs-number">0</span>,<span class="hljs-number">0</span>,<span class="hljs-number">0</span>,.<span class="hljs-number">03</span>) <span class="hljs-number">3px</span>, transparent);<br>&#125;<br><span class="hljs-selector-class">.line</span><span class="hljs-selector-pseudo">::after</span> &#123;<br>    <span class="hljs-attribute">display</span>: block;<br>    <span class="hljs-attribute">background-color</span>: transparent;<br>    <span class="hljs-attribute">background</span>: <span class="hljs-built_in">linear-gradient</span>(to right, <span class="hljs-number">#f6f6f6</span>, <span class="hljs-built_in">rgba</span>(<span class="hljs-number">255</span>, <span class="hljs-number">255</span>, <span class="hljs-number">255</span>, <span class="hljs-number">0</span>), <span class="hljs-number">#f6f6f6</span>);<br>    <span class="hljs-attribute">width</span>: <span class="hljs-number">100%</span>;<br>    <span class="hljs-attribute">height</span>: <span class="hljs-number">100%</span>;<br>    <span class="hljs-attribute">content</span>: <span class="hljs-string">&quot;&quot;</span>;<br>&#125;<br></code></pre></td></tr></table></figure>

<ul>
<li>效果:</li>
</ul>
<div style="height: 40px; background: linear-gradient(to bottom, rgba(0,0,0,.14), rgba(0,0,0,.03) 3px, transparent);">
    <div style="padding-top: 20px; background-color: transparent; height: 100%; background: linear-gradient(to right, #f6f6f6, rgba(255,255,255,0), #f6f6f6);">
        好看的渐变效果线
    </div>
</div>

<h1 id="自适应高度的底部footer"><a href="#自适应高度的底部footer" class="headerlink" title="自适应高度的底部footer"></a>自适应高度的底部footer</h1><p>页面中有底部</p>
<ul>
<li>当高度不够时，底部显示在最底部</li>
<li>高度足够时，底部被挤下去</li>
</ul>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><code class="hljs html"><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;app&quot;</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;content&quot;</span>&gt;</span><br>        内容<br>    <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;footer&quot;</span>&gt;</span><br>        底部<br>    <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br></code></pre></td></tr></table></figure>

<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><code class="hljs css"><span class="hljs-selector-class">.app</span> &#123;<br>    <span class="hljs-attribute">display</span>: flex;<br>    <span class="hljs-attribute">flex-direction</span>: column;<br>    <span class="hljs-attribute">justify-content</span>: space-between;<br>    <span class="hljs-attribute">min-height</span>: <span class="hljs-number">100vh</span>;<br>&#125;<br><span class="hljs-selector-class">.content</span> &#123;<br>    <span class="hljs-attribute">height</span>: <span class="hljs-number">10px</span>; <span class="hljs-comment">/* 页面高度不足 */</span><br>&#125;<br><span class="hljs-selector-class">.content</span> &#123;<br>    <span class="hljs-attribute">height</span>: <span class="hljs-number">100vh</span>; <span class="hljs-comment">/* 页面高度足够 */</span><br>&#125;<br></code></pre></td></tr></table></figure>

<p>这里不做演示，<code>vh</code>不好演示，效果如图</p>
<h2 id="页面高度不足"><a href="#页面高度不足" class="headerlink" title="页面高度不足"></a>页面高度不足</h2><p>底部显示在最下面，紧贴浏览器</p>
<p><img src="../static/css%E5%AE%9E%E6%88%98.assets/image-20210520033842686.png" alt="image-20210520033842686"></p>
<h2 id="页面高度足够"><a href="#页面高度足够" class="headerlink" title="页面高度足够"></a>页面高度足够</h2><p>底部被内容挤到下面，显示下拉框</p>
<p><img src="../static/css%E5%AE%9E%E6%88%98.assets/image-20210520034122494.png" alt="image-20210520034122494"></p>


    </div>
  </div>
  <div class="go-up">
  <a href="#" rel="go-top">
    <i class="fas fa-angle-up"></i>
  </a>
</div>

<script src="/js/bootstrap.min.js"></script>
<script src="/js/TweenMax.min.js"></script>
<script src="/js/resizeable.min.js"></script>
<script src="/js/joinable.js"></script>
<script src="/js/xenon-api.min.js"></script>
<script src="/js/xenon-toggles.min.js"></script>
<script src="/js/xenon-custom.min.js"></script>


<script async src="https://busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script>



<script src="/js/lozad.min.js"></script>


</body>

<script src="/js/footer.js"></script>

</html>
